<template>
  <div class="container">
    <div class="userbox">
      <div class="avatar">
        <img
          :src="state.userInfo.headerurl ? baseApi + state.userInfo.headerurl : baseApi + 'UserHeader\\20230214105739655.jpg'"
          alt="" />
      </div>
      <div class="name">
        {{ state.userInfo.UserName }}
      </div>
    </div>
    <div class="navs">
      <div class="item" :class="state.params.tagId == v.ThemeID ? 'active' : ''" v-for="(v, k) in state.tags" :key="k"
        @click="changeNavs(v)">
        {{ v.ThemeName }}
      </div>
    </div>
    <div class="more">
      <div class="des">作者图库</div>
      <waterfellVue class="water" :data="state.list" @update="update" :columns="3"></waterfellVue>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  inject,
  computed,
} from "vue";
import * as HomeApi from "@/api/home";
import { useRoute, useRouter } from "vue-router";
import waterfellVue from "../../components/waterfell-horizontal.vue";
import * as UserApi from "@/api/user";
import * as AlbumApi from "@/api/album";
import * as LoginApi from "@/api/login";
import { ElNotification } from "element-plus";
import { storeUser } from "@/store/user";
import * as CollectApi from "@/api/collect";
import WaterFall from "@/components/waterfell-horizontal.vue";
import Avatar from '@/assets/pics/avatar.png'
const router = useRouter();
const route = useRoute();
const user = storeUser();
const active = ref(0);
const showEdit = ref(false);

const state = reactive({
  list: [],
  params: {
    pageIndex: 1,
    pageSize: 20,
    tagId: 0
  },
  tags: [],
  count: 0,
  status: '',
  userInfo: {
    headerurl: '',
    UserName: '',
    UserId: 0
  },
});
const update = () => {
  init();
};
const getInfo = async () => {
  let { data } = await UserApi.getUser({ UserAccount: route.query.account })
  state.userInfo = data.UserData
}
const changeNavs = (v) => {
  state.params.tagId = v.ThemeID
  init()
}
const init = async () => {
  state.params.pageIndex = 1
  let { data: res } = await HomeApi.getInfo({
    CurrentUserAccount: user.UserAccount,
    UploadUserID: state.userInfo.UserId,
    PageSize: state.params.pageSize,
    PageIndex: state.params.pageIndex,
    queryThemeID: state.params.tagId,
    OrderByDatetimeOrReadNumber:1
  });
  state.count = res.UserData.Count;
  state.list = res.UserData.PicList;
  nextTick(() => {
    window.onscroll = async (e) => {
      console.log(document.body.clientHeight)
      console.log(window.scrollY)
      if (document.body.clientHeight - 929 - window.scrollY < 500) {
        if (state.status == "loading") return;
        if (state.list.length >= state.count) return;
        state.status = "loading";
        state.params.pageIndex++;
        let { data: res } = await HomeApi.getInfo(
          {
            CurrentUserAccount: user.UserAccount,
            UploadUserID: state.userInfo.UserId,
            PageSize: state.params.pageSize,
            PageIndex: state.params.pageIndex,
            queryThemeID: state.params.tagId,
            OrderByDatetimeOrReadNumber:1
          }
        );
        state.list = [...state.list, ...res.UserData.PicList];
        state.status = "end";
      }
    };
  });

}
const getTheme = async () => {
  let { data } = await HomeApi.getTheme();
  state.tags = [{ ThemeID: '', ThemeName: "全部" }, ...data.UserData];
  // state.params.tagId = data.UserData[0].ThemeID
}
onMounted(async () => {
  await getInfo()
  await getTheme()
  await init()
})
</script>
<style scoped lang="scss">
.container {
  width: 74%;
  margin: 0 auto;
}

.userbox {
  text-align: center;

  >div {
    margin: 10px auto;
  }

  .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;

    img {
      width: 100%;
      object-fit: cover;
    }
  }

  .name {
    font-size: 56px;
    font-weight: 300;
  }

  .total {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;

    .item {
      padding: 0px 24px;
      font-size: 18px;

      &:last-child {
        border: 0;
      }
    }

    .line {
      align-self: center;
      color: #ccc;
    }
  }
}

.header {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}

.edit-avatar {
  display: flex;
  align-items: center;
  overflow: hidden;

  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }
}

.btns {
  text-align: center;
}

.more {
  margin-top: 40px;

}
.des{
  font-size: 16px;
  font-weight: 600;
  margin: 20px;
}
.navs {
  text-align: center;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .item {
    padding: 12px 24px;
    border-radius: 30px;
    color: #302f2f;
    font-weight: 600;
    font-size: 13px;
    margin-right: 20px;
    cursor: pointer;

    &:hover {
      color: #000;
    }
  }

  .active {
    background: #23c79b;
    font-size: 16px;
    color: #fff;

    &:hover {
      color: #fff;
      background: #23c79bdd;
    }
  }
}
</style>
